<template>
    <div>
      <div id="bg">
        <div id="logo">游戏服务管理系统</div>
        <div id="login">
          <el-card class="box-card" >
            <div id="form" :v-model="user" @keyup.enter="login">
              <el-input v-model="user.name" placeholder="请输入用户名"></el-input>
              <el-input
                placeholder="请输入密码"
                v-model="user.password"
                show-password
              ></el-input>
              
              <img :src="captchaUrl" @click="changeImage()" width="143px" height="40px" />
              <el-input
              placeholder="请输入验证码"
              v-model="user.code"
            ></el-input>
            
  
              <el-button id="denglu" type="primary" @click="login">登录</el-button>
              <el-button id="register" type="success" @click="register">注册</el-button>
              <el-button id="forget"  type="info" @click="showForgotPasswordModal">忘记密码</el-button>
              <el-button  class="el-icon-arrow-left"  id="return-btn" style="background-color:transparent;color:black;font-weight: bold;border:none;margin-top: 10px;"><router-link to="/" style="text-decoration:none;color:blue;">返回</router-link></el-button>
            </div>
          </el-card>
        </div>
        <div id="clock">
          <div id="time">{{ time }}</div>
          <div id="date">{{ date }}</div>
        </div>
        <div id="copy">Copyright @ 2024.涂科网页版权归属</div>
      </div>
  
      <el-dialog
        title="找回密码"
        :visible="forgotPasswordModalVisible"
        @close="forgotPasswordModalVisible = false"
      >
        <el-form :model="forgotPasswordForm" label-width="80px">
          <el-form-item label="邮箱地址" prop="email">
            <el-input v-model="forgotPasswordForm.email" placeholder="请输入注册时使用的邮箱地址"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="forgotPasswordModalVisible = false">取消</el-button>
          <el-button type="primary" @click="sendResetEmail">发送重置邮件</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import request from '@/request/request.js';

  export default {
    data() {
      return {
        user: {},
        key: '',

        captchaUrl: '',
        time: "",
        date: "",
        forgotPasswordModalVisible: false,
        forgotPasswordForm: {
          email: ''
        }
      };
    },
    mounted() {
      this.key = Math.random();
      this.captchaUrl = 'http://47.99.51.143:9000/captcha?key=' + this.key;
      this.$nextTick(() => {
        setInterval(this.updateClock, 1000);
      });
    },
    methods: {
      changeImage() {
        this.key = Math.random();
        this.captchaUrl = 'http://47.99.51.143:9000/captcha?key=' + this.key;
      },
      updateClock: function () {
        var date = new Date();
        this.time = this.formatTime(date);
        this.date = this.formatDate(date);
      },
      formatTime: function (date) {
        var hours = this.padZero(date.getHours());
        var minutes = this.padZero(date.getMinutes());
        return hours + ":" + minutes;
      },
      formatDate: function (date) {
        var year = date.getFullYear();
        var month = this.padZero(date.getMonth() + 1);
        var day = this.padZero(date.getDate());
        return year + "/" + month + "/" + day;
      },
      padZero: function (value) {
        return value < 10 ? '0' + value : value;
      },
      showForgotPasswordModal() {
        this.forgotPasswordModalVisible = true;
      },
      sendResetEmail() {
        console.log('发送重置邮件到邮箱：', this.forgotPasswordForm.email);
        this.forgotPasswordModalVisible = false; // 关闭模态框
        // 在这里实现发送重置邮件的逻辑
      },
      login() {
        request.post("/user/login?key=" + this.key, this.user).then(res => {
          console.log(res);
          if (res.code === "0") {

            //本地仓库存储user信息
            localStorage.setItem('user', JSON.stringify(res.data));
            // 跳转到游戏页面
            if (res.data.role === "2") {
              this.$router.push({ path: '/usergame' });
              this.$message.success(`欢迎您，用户${res.data.name}！`);

            } else {
              this.$message.error('账户错误，请输入用户账户信息');
              this.key = Math.random();
              this.captchaUrl = 'http://47.99.51.143:9000/captcha?key=' + this.key;
            }

          } else {
            this.$message.error('用户名或密码或验证码错误');
            this.key = Math.random();
            this.captchaUrl = 'http://47.99.51.143:9000/captcha?key=' + this.key;
          }

        });
      },
      register() {
        this.$router.push({ path: '/register' });
      }
    }
  };
</script>
  
  <style scoped>
  #bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    /* 渐变 */
    background-image: url("/src/views/photo/login1.jpg");
    background-size: 100%;
    animation: myanimation 30s infinite;
  }

  @keyframes myanimation {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 100%;
    }
  }

  #logo {
    color: black;
    font-size: 50px;
    font-weight: 80;
    text-transform: uppercase;
    position: absolute;
    left: 5%;
    top: 15%;
  }

  #login {
    top: 30%;
    position: absolute;
    left: 38%;
  }

  #return-btn {
    position: absolute;
    top: 0;
    left: 0;
  }

  .el-card {
    border-radius: 3%;
    width: 373px;
    height: 400px;
    background: rgba(255, 255, 255, 0.35);



  }

  #form {
    padding-bottom: 15px;
    line-height: 60px;
  }

  #clock {
    color: aliceblue;
    position: absolute;
    top: 70%;
    right: 10%;
    text-align: right;
  }

  #register {
    position: absolute;
    left: 70%;
    top: 80%;
  }




  #denglu {
    position: absolute;
    left: 5%;
    top: 80%;
  }



  #forget {
    position: absolute;
    left: 40%;
    top: 80%;
  }

  #time {
    font-size: 50px;
  }

  #date {
    font-size: 35px;
  }

  #copy {
    color: aliceblue;
    position: absolute;
    bottom: 5%;
    left: 40%;
    right: 0;
  }
</style>
  
  